<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            color:#999;
        }
    </style>
</head>
<body>
    <!-- <button id="btn">唐伯虎</button>
    <div id="txt">123</div> -->
    <button id="1">《1》</button>
    <button id="2">《2》</button>
    <button id="close"> X </button>
    <img src="./images/1.jpg" alt="">
    <input type="text" value="手机">
    <script>
        //var btn = document.getElementById('btn');

        //-----------------用inner.HTML改变文字内容
        // var div = document.getElementById('txt');
        // div.innerHTML = '改变';

        //------用 img.src改变图片
        var one = document.getElementById('1');
        var two = document.getElementById('2');
        var pic = document.querySelector('img');
        var del = document.getElementById('close');
        var input = document.querySelector('input');
        var flag = 1;
        one.onclick = function(){
            if(flag == 1)
            {
                pic.src = './images/1.jpg';
                pic.title = '单杀'; 
            }
            else if(flag == -1)
            {
                pic.src = './images/2.jpg';
                pic.title = '鸿蒙';
            }
            flag = -flag;
        }
        two.onclick = function(){
            pic.src = './images/2.jpg';
            pic.title = '鸿蒙';
        }
        del.onclick = function(){
            pic.style.display = 'none';
        }

        input.onfocus = function(){
            this.value = '';
            this.style.color = '#333';
        }

        input.onblur = function(){
            this.value = '手机';
            this.style.color = '#999';
        }

        //this.className = 'change';注意:> 会覆盖以前的类名
        //和以前一样就要：this.className = 'old change';
    </script>
</body>
</html>